<template>
	<div class="app-container">
		<!--工具栏-->
		<div class="head-container">
			<div v-if="crud.props.searchToggle">
				<!-- 搜索 -->
				<el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item"
					@keyup.enter.native="crud.toQuery" />
				<el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
					<el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name"
						:value="item.key" />
				</el-select>
				<rrOperation :crud="crud" />
			</div>
			<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
			<crudOperation :permission="permission">
				<el-button class="filter-item" size="mini" type="danger" slot='right' :loading="getApiLoading"
					@click="getOffer(0,crud.selections)">一键获取报价</el-button>
				<el-button class="filter-item" size="mini" type="success" slot='right' :loading="getTurnLoading"
					:disabled="crud.selections.length === 0" @click="getOffer(1,crud.selections)">一键转换报价</el-button>
			</crudOperation>
			<!--表单组件-->
			<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
				:title="crud.status.title" width="60%">
				<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
					<el-form-item label="回收名称" prop="vrecoveryName">
						<el-input v-model="form.vrecoveryName" style="width: 350px;" />
					</el-form-item>
					<el-form-item label="回收别名">
						<el-input v-model="form.vrecoveryAlias" style="width: 350px;" />
					</el-form-item>
					<el-form-item label="图片icon">
						<MaterialList v-model="imgIconArr" style="width: 350px;" type="image" :num="1" :width="150"
							:height="150" />
					</el-form-item>
					<el-form-item label="报价类型">
						<el-select style="width: 350px;" v-model="form.offerType" filterable placeholder="请选择">
							<el-option v-for="item in dict.recovery_offer_type" :key="item.id" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item
						v-if="form.offerType === '' || form.offerType === 1 || form.offerType === 2 || form.offerType === 3"
						label="参数url" style="width: 100%;">
						<el-input :rows="3" v-model="form.apiUrl" type="textarea" />
						<div class="red">多个url用英文逗号隔开</div>
					</el-form-item>
					<el-form-item label="排序desc" style="width: 100%;">
						<el-input v-model="form.sort" />
					</el-form-item>
					<el-form-item
						v-if="form.offerType === '' || form.offerType === 1 || form.offerType === 2 || form.offerType === 3"
						label="是否获取">
						<el-radio-group v-model="form.isApiGet" style="width: 206px;">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item
						v-if="form.offerType === '' || form.offerType === 1 || form.offerType === 2 || form.offerType === 3"
						label="是否转换">
						<el-radio-group v-model="form.isTurnImg" style="width: 206px;">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="警告覆盖">
						<el-radio-group v-model="form.isWarnCover" style="width: 206px;">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="是否标题">
						<el-radio-group v-model="form.isTitle" style="width: 206px;">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="是否背景">
						<el-radio-group v-model="form.isBgColor" style="width: 206px;">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="form.status" style="width: 206px;">
							<el-radio :label="1">正常</el-radio>
							<el-radio :label="0">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
					<!-- 全品类 -->
					<el-table v-if="form.offerType === 5 && crud.status.title === '编辑'" :data="form.colourSetList" border style="width: 100%">
						<el-table-column prop="replaceType" label="替换类型" width="180">
							<template slot-scope="scope">
								{{ scope.row.replaceType === 0 ? 'KG' : '' }}
							</template>
						</el-table-column>
						<el-table-column prop="rcolourType" label="颜色类型" width="180">
							<template slot-scope="scope">
								{{ scope.row.rcolourType === 1 ? '替换背景色' : '水印底色' }}
							</template>
						</el-table-column>
						<el-table-column prop="red" label="R"></el-table-column>
						<el-table-column prop="green" label="G"></el-table-column>
						<el-table-column prop="blue" label="B"></el-table-column>
						<el-table-column prop="replaceRed" label="替R"></el-table-column>
						<el-table-column prop="replaceGreen" label="替G"></el-table-column>
						<el-table-column prop="replaceBlue" label="替B"></el-table-column>
					</el-table>
					<!-- 结束 -->
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="text" @click="crud.cancelCU">取消</el-button>
					<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
				</div>
			</el-dialog>
			<!--表格渲染-->
			<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
				@selection-change="crud.selectionChangeHandler">
				<el-table-column type="selection" width="55" />
				<el-table-column v-if="columns.visible('vrecoveryName')" show-overflow-tooltip prop="vrecoveryName"
					label="回收名称" />
				<el-table-column v-if="columns.visible('vrecoveryAlias')" show-overflow-tooltip prop="vrecoveryAlias"
					label="回收别名" />
				<el-table-column v-if="columns.visible('imgIcon')" prop="imgIcon" label="图片icon">
					<template slot-scope="scope">
						<a :href="scope.row.imgIcon" style="color: #42b983" target="_blank">
							<img :src="scope.row.imgIcon" alt="点击打开" class="table-img" />
						</a>
					</template>
				</el-table-column>
				<el-table-column v-if="columns.visible('offerType')" prop="offerType" label="报价类型">
					<template slot-scope="scope">
						{{ dict.label.recovery_offer_type[scope.row.offerType] }}
					</template>
				</el-table-column>
				<el-table-column v-if="columns.visible('isApiGet')" prop="isApiGet" label="是否获取">
					<template slot-scope="scope">
						{{ dict.label.is_enable[scope.row.isApiGet] }}
					</template>
				</el-table-column>
				<!-- <el-table-column v-if="columns.visible('apiUrl')" prop="apiUrl" label="获取参数url">
					<template slot-scope="scope">
						{{scope.row.apiUrl}}
					</template>
				</el-table-column> -->
				<el-table-column v-if="columns.visible('apiImgUrl')" prop="apiImgUrl" label="获取报价图片">
					<template slot-scope="scope">
						<div v-show="scope.row.apiImgUrl">
							<el-image v-for="(item,index) in getUrlList(scope.row.apiImgUrl)" :key="index"
								style="width: 30px; height: 30px;margin-left: 3px;" :src="item"
								:preview-src-list="evaluatePictureList" title="点击查看图片"
								@click="clickevaluatePicture(scope.row.apiImgUrl)" />
						</div>
					</template>
				</el-table-column>
				<el-table-column v-if="columns.visible('isTurnImg')" prop="isTurnImg" label="是否转换">
					<template slot-scope="scope">
						{{ dict.label.is_enable[scope.row.isTurnImg] }}
					</template>
				</el-table-column>
				<el-table-column v-if="columns.visible('turnImgUrl')" prop="turnImgUrl" label="转换报价图片">
					<template slot-scope="scope">
						<div v-show="scope.row.turnImgUrl">
							<el-image v-for="(item,index) in getUrlList(scope.row.turnImgUrl)" :key="index"
								style="width: 30px; height: 30px;margin-left: 3px;" :src="item"
								:preview-src-list="evaluatePictureList" title="点击查看图片"
								@click="clickevaluatePicture(scope.row.turnImgUrl)" />
						</div>
					</template>
				</el-table-column>
				<el-table-column v-if="columns.visible('sort')" prop="sort" label="排序desc" width="100" />
				<el-table-column v-if="columns.visible('status')" prop="status" label="状态" width="80">
					<template slot-scope="scope">
						<!-- {{ dict.label.user_status[scope.row.status] }} -->
						{{ scope.row.status === 1 ? '正常' : '禁用' }}
					</template>
				</el-table-column>
				<el-table-column v-if="columns.visible('createTime')" show-overflow-tooltip prop="createTime"
					label="添加时间" width="110">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.createTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column v-permission="['admin','syRecoveryOffer:edit','syRecoveryOffer:del']" label="操作"
					width="150px" align="center">
					<template slot-scope="scope">
						<udOperation :data="scope.row" :permission="permission" />
					</template>
				</el-table-column>
			</el-table>
			<!--分页组件-->
			<pagination />
		</div>
	</div>
</template>

<script>
	import crudSyRecoveryOffer from '@/api/syRecoveryOffer'
	import CRUD, {
		presenter,
		header,
		form,
		crud
	} from '@crud/crud'
	import rrOperation from '@crud/RR.operation'
	import crudOperation from '@crud/CRUD.operation'
	import udOperation from '@crud/UD.operation'
	import pagination from '@crud/Pagination'
	import MaterialList from "@/components/material";
	import {
		getImg
	} from '@/api/syRecoveryOffer'

	// crud交由presenter持有
	const defaultCrud = CRUD({
		title: '',
		url: 'api/syRecoveryOffer',
		sort: 'offer_type,asc',
		crudMethod: {
			...crudSyRecoveryOffer
		}
	})
	const defaultForm = {
		id: null,
		vrecoveryName: null,
		vrecoveryAlias: null,
		imgIcon: null,
		offerType: '',
		isApiGet: 0,
		apiUrl: null,
		apiImgUrl: null,
		isTurnImg: 0,
		isWarnCover: 0,
		turnImgUrl: null,
		sort: null,
		status: 1,
		createTime: null,
		isTitle: 1,
		isBgColor: 1,
	}
	export default {
		name: 'SyRecoveryOffer',
		components: {
			pagination,
			crudOperation,
			rrOperation,
			udOperation,
			MaterialList
		},
		mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
		dicts: ['recovery_offer_type', 'is_enable', 'is_enable', 'user_status'],
		data() {
			return {
				getApiLoading: false,
				getTurnLoading: false,
				imgIconArr: [],
				permission: {
					add: ['admin', 'syRecoveryOffer:add'],
					edit: ['admin', 'syRecoveryOffer:edit'],
					del: ['admin', 'syRecoveryOffer:del'],
				},
				rules: {
					vrecoveryName: [{
						required: true,
						message: '回收名称不能为空',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '状态（0：正常 1：禁用）不能为空',
						trigger: 'blur'
					}],
					createTime: [{
						required: true,
						message: '添加时间不能为空',
						trigger: 'blur'
					}]
				},
				queryTypeOptions: [{
						key: 'vrecoveryName',
						display_name: '回收名称'
					},
					{
						key: 'offerType',
						display_name: '报价类型(0：全新闲置回收；1：主流手机回收；2：lpad平板回收；3：笔记本电脑回收；4：新机批发最新报价)'
					}
				],
				evaluatePictureList: []
			}
		},
		watch: {
			"imgIconArr": function(val) {
				if (val) {
					this.form.imgIcon = val.join(",");
				}
			},
		},
		methods: {
			// 获取数据前设置好接口地址
			[CRUD.HOOK.beforeRefresh]() {
				const query = this.query
				if (query.type && query.value) {
					this.crud.params[query.type] = query.value
				} else {
					delete this.crud.params.vrecoveryName
					delete this.crud.params.offerType
				}
				return true
			},
			// 新增与编辑前做的操作
			[CRUD.HOOK.afterToCU](crud, form) {
				if (form.imgIcon && form.id) {
					this.imgIconArr = form.imgIcon.split(",");
				} else {
					this.imgIconArr = []
				}
			},
			getUrlList(val) {
				if (val) {
					return val.split(",");
				} else {
					return [];
				}
			},
			// 点击评价图片，大图预览多张图片
			clickevaluatePicture(val) {
				if (val) {
					this.evaluatePictureList = val.split(",");
				}
			},
			getOffer(type, datas) {
				if (type == 0) {
					this.getApiLoading = true;
					this.getTurnLoading = false;
				} else if (type == 1) {
					this.getApiLoading = false;
					this.getTurnLoading = true;
				}
				try {
					const ids = []
					const data = {}
					if (datas instanceof Array) {
						datas.forEach(val => {
							ids.push(val.id)
						})
					} else ids.push(datas)
					data.type = type
					data.ids = ids
					getImg(data).then(() => {
						this.crud.toQuery()
						this.$notify({
							title: '刷新成功',
							type: 'success',
							duration: 2500
						})
					}).catch(err => {
						console.log(err.response.data.message)
					})
				} catch (exception) {
					this.$message.error('刷新失败！')
				} finally {
					setTimeout(() => {
						this.getApiLoading = false;
						this.getTurnLoading = false;
					}, 500)
				}
			},
		}
	}
</script>

<style scoped>
	.table-img {
		display: inline-block;
		text-align: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		vertical-align: middle;
		width: 32px;
		height: 32px;
		line-height: 32px;
	}

	.red {
		color: red;
		font-size: 12px;
	}

	.el-form-item {
		display: inline-block;
	}
</style>